<template>
<div class="layerRtb layerRtb-threecolumn">
     <three-title :title="{name:'能力'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">业能</p>
            <div class="analyItemCon">
                <div class="col-md-10">
                  <div class="fl">
                        <rx-viewer :images="imgList" >
                            <div class="clearfix tx-center">
                                <div class="mr10 fl" v-for="(imgitem, imgindex) of imgList" :key="imgindex" style="position:relative">
                                    <img :src="imgitem | smallImg(80, 80)">
                                </div>
                            </div>
                        </rx-viewer>
                    </div>
                    <rx-upload
                        class="fl"
                        :data="{id: 11}" :init="{class: 1, mime: 1}"
                        :elStyle="{width:'90px', height: '80px'}"
                        @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                </div>
                <p class="col-md-12 mt20">
                        <span class="cLightGray col-md-1">备注:</span>
                        <span class="col-md-8">
                         <el-input  v-model="inputYe" placeholder="输入备注"></el-input>
                        </span>
                        <span class="col-md-22 ">
                         <el-button class="fr" @click="confirm(1,inputYe)" type="primary">确定</el-button>
                        </span>
                </p>
                 <!-- <p class="col-md-12 mt20" v-if="bzedit==1">
                        <span class="cLightGray pr8 col-md-1">备注:</span>
                        <span class="col-md-8">
                          <el-input v-model="inputYe" placeholder="输入业能"></el-input>
                        </span>
                </p>
                <div class="col-md-2 "  v-if="bzedit === 0">
                        <img  style="position: absolute; right: 10px;top: 40px;" src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fl pointer mr5" @click="bzedit=1">
                </div>
                <div class="col-md-2 imgbox " v-if="bzedit === 1">
                        <img style="position: absolute; right: 40px;top: 40px;" src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_le_self" @click="confirm(1,inputYe)">
                        <img style="position: absolute; right: 10px;top: 40px;" src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="bzedit=0">
                </div> -->
                     <span  style="top:20%" :class="['circlemark', NLyeList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{NLyeList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
            <div class="analyItem" >
                <p class="analyItemTit tx-center">管能</p>
                <div class="analyItemCon">
                    <p class="col-md-12 mb20">
                        <el-checkbox-group v-model="checkListGuan">
                            <el-checkbox @change="changeCheck(47)" label="47" >组织</el-checkbox>
                            <el-checkbox @change="changeCheck(48)" label="48" >协调</el-checkbox>
                            <el-checkbox @change="changeCheck(49)" label="49" >决策</el-checkbox>
                            <el-checkbox @change="changeCheck(50)" label="50" >沟通</el-checkbox>
                        </el-checkbox-group>
                    </p>
                    <p class="col-md-12">
                        <span class="cLightGray col-md-1">备注:</span>
                        <span class="col-md-8">
                         <el-input  v-model="inputGuan" placeholder="输入备注"></el-input>
                        </span>
                        <span class="col-md-22 ">
                         <el-button class="fr" @click="confirm(2,inputGuan)" type="primary">确定</el-button>
                        </span>
                    </p>
                     <span  style="top:20%" :class="['circlemark', NLguanList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{NLguanList.isPresence==null?'待':'完'}}</span>

                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="col-md-10">
                    <span class="col-md-1 cLightGray ">备注</span>
                    <span  class="col-md-8 lh20">
                        <el-input v-model="inputHandel"  placeholder="请输入处理备注..."></el-input>
                    </span>
                </p>
                      <span style="top:20%" :class="['circlemark', NLList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{NLList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
        <div class="tx-center">
            <el-button  @click="confirm(3,inputHandel)" type="primary">保存</el-button>
        </div>
    </div>

</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { saveTrickData } from '../../Resources/Api'

export default {

    data () {
        return {
            NLList: {},
            NLyeList: {},
            NLguanList: {},

            inputHandel: '',
            checkListGuan: [],
            arrcheckListGuan: [],
            inputGuan: '',
            bzedit: 0,
            inputYe: '',
            imgList: []
        }
    },

    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.NLList = this.$route.query.NLList
        this.break()
    },
    methods: {
        successUpload (value) {
            this.imgList.push(value.src)
        },
        changeCheck (val) {
            this.arrcheckListGuan.forEach(item => {
                if (Number(item) === val) {
                    this.saveTrickData(val, null, 0)
                }
            })
        },
        break () {
            // 综合备注
            if (this.NLList.isPresence !== null) {
                this.inputHandel = this.NLList.isPresence[0].remake
            }
            this.NLList.stageMediumType.forEach(element => {
                if (Number(element.exclusiveId) === 12) {
                    this.NLyeList = element
                    // 业能图片
                    element.stageSmallType.forEach(val => {
                        if (val.isPresence !== null) {
                            val.isPresence.forEach(value => {
                                this.imgList.push(value.remake)
                            })
                        }
                    })
                    // 业能备注
                    if (element.isPresence !== null) {
                        this.inputYe = element.isPresence[0].remake
                    }
                } else {
                    this.$nextTick(() => {
                        this.NLguanList = element
                    })
                    // 管能选项
                    element.stageSmallType.forEach(val => {
                        if (val.isPresence !== null) {
                            this.checkListGuan.push(String(val.exclusiveId))
                            this.arrcheckListGuan.push(String(val.exclusiveId))
                        } else {
                            this.inputGuan = ''
                        }
                    })
                    // 管能备注
                    if (element.isPresence !== null) {
                        this.inputGuan = element.isPresence[0].remake
                    }
                    // this.$nextTick(() => {
                    //     this.inputGuan = element.description
                    // })
                }
            })
        },
        confirm (flg, input) {
            if (flg === 1) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                if (Number(this.imgList.length) === 0) {
                    layer.msg('尚未上传图片')
                    return
                }
                this.imgList.forEach(item => {
                    this.saveTrickData(46, item)
                })
                this.saveTrickData(12, input)
            }
            if (flg === 2) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                if (Number(this.checkListGuan.length) === 0) {
                    layer.msg('尚未选择')
                    return
                }
                this.checkListGuan.forEach(item => {
                    this.saveTrickData(item, null)
                })
                this.saveTrickData(13, input)
            }
            if (flg === 3) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                if (this.NLyeList.isPresence !== null && this.NLguanList.isPresence !== null) {
                    this.saveTrickData(5, input)
                } else {
                    layer.msg('尚未完善信息')
                }
            }
        },
        saveTrickData (val, input, deflg) {
            saveTrickData({
                user_card_no: this.leftInfo.cardNo, // 卡号
                userName: this.leftInfo.userName, // 姓名
                remake: input, // 备注
                operatorCard: this.userInfo.as_cardNo, // 操作人
                operatorName: this.userInfo.as_userName, // 操作人姓名
                exclusiveId: val, // 专属ID
                delFlag: deflg

            }).then(res => {
                if (deflg === 0) {
                    return
                }
                if (res.data.StatusCode === 0) {
                    layer.msg('保存成功')
                    // if (this.flg === 3) {
                    //     this.$router.push(this.$route.matched[1].path)
                    // }
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    watch: {
        leftInfo () {
        },
        $route () {
        }
    }
}
</script>
